<template>
  <div class="banner">
    <div class="banner-title">
      <h3>技术服务</h3>
      <h5>钢构管家基于自身近30年的专业服务团队， </h5>
      <h5>为客户提供图纸深化、物料BOM、套料、定额、方案制作及评审、 </h5>
      <h5>工程计算及智能化产线布置一站式技术服务。</h5>
      <div><span @click="show = true">立即咨询</span></div>
    </div>
    <img :src="imgUrl + 'jsfw-banner.png'" alt="" />
  </div>
  <div class="part item-common">
    <div class="part-title">
      <div>我们提供以下服务</div>
      <p>WE PROVIDE THE FOLLOWING SERVICES</p>
    </div>
    <el-row type="flex" :gutter="21">
      <el-col :span="6" v-for="(item, index) in arrData1" :key="index">
        <territory-list :item="item"></territory-list>
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="21">
      <el-col :span="6" v-for="(item, index) in arrData2" :key="index">
        <territory-list :item="item"></territory-list>
      </el-col>
    </el-row>
    <!-- <ul>
      <li class="part-li" v-for="(el, i) in arrData1" :key="i">
        <img :src="el.img" alt="" />
        <div>{{ el.title }}</div>
        <p v-for="(a, b) in el.text" :key="b" class="text-container">{{ a }}</p>
      </li>
    </ul>
    <ul>
      <li class="part-li" v-for="(el, i) in arrData2" :key="i">
        <img :src="el.img" alt="" />
        <div>{{ el.title }}</div>
        <p v-for="(a, b) in el.text" :key="b">{{ a }}</p>
      </li>
    </ul> -->
  </div>
  <div class="part">
    <div class="part-title">
      <div>我们的优势</div>
      <p>OUR ADVANTAGES</p>
    </div>
    <div class="advantages-bg">
      <div class="advantages-content">
        <div class="content-top">
          <div class="top-sub-title">
            <div class="sub-title-main left">技术牛</div>
            <div class="sub-title-description left">
              <p>依托公司近30年的钢结构桥梁制造 </p>
              <p>安装施工技术经验积累 </p>
              <p>拥有一支经验丰富的施工方案设计和 </p>
              <p>施工图深化团队，更加专业</p>
            </div>
          </div>
          <el-image class="advantages-image" :src="`${imgUrl}jsfw-advantage.png`"></el-image>
          <div class="top-sub-title">
            <div class="sub-title-main">服务优</div>
            <div class="sub-title-description">
              <p>专业的项目团队无缝衔接服务  </p>
              <p>全天24小时随时沟通交流</p>
              <p>确保及时解决客户需求</p>
            </div>
          </div>
        </div>
        <div class="content-bottom">
          <div class="bottom-sub-title">
            <div class="sub-title-main left">效率高</div>
            <div class="sub-title-description left">
              <p>近百人的技术团队  </p>
              <p>根据客户需求快速成立专业的项目负责小组</p>
              <p>全天制图，高效完成任务</p>
            </div>
          </div>
          <div class="bottom-sub-title">
            <div class="sub-title-main">质量好</div>
            <div class="sub-title-description">
              <p>精细、规范的图纸深化流程，完善的多级图纸审核体系</p>
              <p>借助信息化系统审核，不遗漏任何一处细节</p>
              <p>确保图纸精细准确</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- <div
    class="part-problem"
    :style="`background: url(${imgUrl}jsfw-advantage.png) no-repeat center center; background-size: cover;`"
  ></div> -->
  <div class="part">
    <div class="part-title">
      <div>流程服务</div>
      <p>PROCESS SERVICES</p>
    </div>
    <ul>
      <li class="text-c" v-for="(el, i) in processData" :key="i">
        <img :src="el.img" alt="" class="process-image"/>
        <div>{{ el.title }}</div>
        <p v-for="(a, b) in el.text" :key="b">{{ a }}</p>
      </li>
    </ul>
  </div>
  <div class="part">
    <div class="part-title">
      <div>设计方案</div>
      <p>PROCESS SERVICES</p>
    </div>
    <img
      style="
        margin: auto;
        width: 1199px;
        height: 2154px;
        display: block;
        margin-bottom: 100px;
      "
      :src="`${imgUrl}jsfw-design.png`"
      alt=""
    />
  </div>
  <access-services-dialog
    v-model="show"
    @close="show = !show"
    @handleConfirm="handleConfirm"
  />
  <service-telephone-dialog v-model="show1" @close="show1 = !show1" />
</template>

<script setup lang="ts">
import { ref } from "vue";
// import territoryList from "./componments/territory-list.vue"
import { arrData1, arrData2,processData, brightSpotArray, advantageDate } from "./constants";
import AccessServicesDialog from "@/components/access-services-dialog/index.vue";
import ServiceTelephoneDialog from "@/components/service-telephone-dialog/index.vue";
import { imgUrl } from "@/utils/common";
import territoryList from "../components/territory-list.vue"
import fiveAdvantages from "@/views/software-mall/dispatch-work-apply/major/components/five-advantages.vue";

const pointData = ref(brightSpotArray[0].photosData);
/* 产品两点区域 */
const btn = ref(brightSpotArray[0].title);
const handleClickTab = (item) => {
  btn.value = item.title;
  pointData.value = item.photosData;
  console.log(item);
};
const show = ref(false);
const show1 = ref(false);
const handleConfirm = () => {
  show.value = false;
  show1.value = true;
};
</script>

<style scoped lang="scss">
.banner {
  position: relative;
  .banner-title {
    position: absolute;
    top: 53%;
    left: 30.7%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    text-align: left;
    h3 {
      font-size: 60px;
      line-height: 70px;
      font-weight: 600;
      margin-bottom: 20px;
    }
    h5 {
      font-weight: 400;
      font-size: 18px;
      line-height: 32px;
      /* margin-bottom: 20px; */
    }
    p {
      display: inline-block;
      padding: 12px 16px;
      background: #809bc0;
      border-radius: 3px;
      font-size: 16px;
      line-height: 24px;
    }
    div {
      margin-top: 67px;
      span {
        cursor: pointer;
        display: inline-block;
        padding: 12px 50px;
        background-color: #fff;
        color: #1678ff;
        border-radius: 3px;
        font-weight: 400;
        font-size: 20px;
      }
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
}
/* .part {
      height: 717px;
    } */
.part-title {
  margin: 100px 0 40px 0;
}
ul {
  display: flex;
  /* width: calc(100% - 640px); */
  width: 66.7%;
  margin: 20px auto 20px;
  justify-content: space-around;

  li {
    
    /* background-color: #ebecf0; */

    img {
      width: 65px;
      height: 65px;
      margin-bottom: 16px;
    }
    div {
      font-size: 20px;
      line-height: 30px;
    }
    p {
      font-weight: 400;
      font-size: 14px;
      color: #7a869a;
      line-height: 28px;
    }
    .process-image {
      width: 153px;
      height: 145px;
    }
  }
  .part-li {
    width: 300px;
    height: 180px;
    border: 1px solid #DFE1E6;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
  }
}
ul+ul {
  margin-bottom: 100px
}
.part-problem {
  height: 667px;
}
.btn-tabs {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-around;
}
.sim-button {
  text-align: center;

  cursor: pointer;
  padding: 8px 24px;
  background-color: #f4f4f4;
  border-radius: 3px;
  /* color: rgba(255, 255, 255, 1); */
  /* border: 1px solid rgba(255, 255, 255, 0.5); */
}
.item-common {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .list-container {
    display: flex;
  }
}
.button2 {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  overflow: hidden;
  position: relative;
}
.button2:hover {
  background-color: #1678ff;
  color: #fff;
}
.button2 > span {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.button2:hover > span {
  opacity: 0;
}
.button2::after {
  content: attr(data-text);
  width: 100%;
  height: 100%;
  position: absolute;
  left: -50px;
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  color: #fff;
}
.button2:hover::after {
  left: 0;
  opacity: 1;
}
.sim-button__active {
  background-color: #1678ff;
  color: #fff;
}
/* 产品两点tip */
/* .banner-tip {
      position: absolute;
    } */
:deep(.el-carousel__container) {
  height: 702px;
}
:deep(.el-carousel__indicators--outside button) {
  /* background-color: var(--el-carousel-indicator-out-color); */
  opacity: 1;
  background: #ebecf0;
  width: 90px;
  height: 6px;
  border-radius: 4px;
}
:deep(.el-carousel__indicator.is-active button) {
  background-color: #1678ff;
}
.advantages-bg {
  width: 100%;
  height: 610px;
  background-color: #F2F8FF;
  display: flex;
  flex-direction: column;
  align-items: center;
  .advantages-content {
    margin-top: 70px;
  }
  .content-top {
    display: flex;
    justify-content: center;
  }
  .content-bottom {
    margin-top: 4px;
    display: flex;
    justify-content: center;
    margin-left: 103px;
  }
  .advantages-image {
    width: 662px;
    height: 348px;
  }
  .top-sub-title {
    margin-top: 82px;
  }
  .top-sub-title+.advantages-image {
    margin-left: 16px;
  }
  .advantages-image+.top-sub-title {
    margin-left: 16px;
  }
  .sub-title-main {
    font-weight: 600;
    font-size: 24px;
    color: #1678FF;
    line-height: 28px;
  }
  .sub-title-description {
    margin-top: 12px;
    font-size: 16px;
    color: #7A869A;
    line-height: 24px;
  }
  .left {
    text-align: right;
  }
  .bottom-sub-title+.bottom-sub-title {
    margin-left: 252px;
  }
}
.text-c {
  text-align: center;
}
.el-row+.el-row {
  margin-top: 21px;
}
</style>
